<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p align="center">我的钱包</p>
			<!-- 返回键 -->
			<GoBackButton></GoBackButton>
		</header>

		<UpperBox></UpperBox>

		<div class="title-box">
			<div class="title-box-center">
				<span class="namber">{{ virtualWallet.balance }}</span>
				<span class="other">¥余额</span>
			</div>
		</div>
		<div class="title-box-under">
			<ul>
				<li class="char">
					<span>收支明细 </span>
				</li>
				<li>
					<span class="center">|</span>
				</li>
				<li class="char">
					<span>支付管理</span>
				</li>
			</ul>
		</div>
		<div class="mid">
			<div class="mid-u">
				<span>输入充值金额：</span>
			</div>
			<div class="content">
				<input type="number" v-model="money" placeholder="充值金额">
			</div>
			<div class="mid-button">
				<div class="button" @click="GiveMoney">
					<span>确认充值</span>
				</div>
			</div>
		</div>

		<div class="more">
			<span class="left">更多</span>
			<i class="fa fa-angle-right"></i>
		</div>
		<!-- <div>
            <div class="title-box-under">
                <ul>
                    <li>
                        <button>收支明细 </button>
                    </li>
                    <li>
                        <span>|</span>
                    </li>
                    <li>
                        <button>支付管理</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="mid-upper-box"></div>
        <div class="mid-box1">
            <div class="mid-box-upper"></div>
            <div class="mid-box-mid1">
                <div class="charge">钱包充值：</div>
            </div>
            <div class="mid-box-mid2">
                <div class="amount-input">
                <input type="text" placeholder="请输入金额">
                </div>
            </div>
        </div>   
        <br>
        <div class = "mid-box2">
            <p class="reminder1">温馨提示：充值成功后，到账可能会有一定延迟，</p>
            <br>
            <p class="reminder2">请耐心等待。钱包暂时不支持体现~ </p>
        </div>
        <div class="mid-upper-box"></div>
        <div class="button-container">
            <button class="button">充值</button>
        </div> -->

		<!-- 底部 -->
		<UnderBox></UnderBox>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>
<script>
	import Footer from '../components/Footer.vue';
	import UpperBox from '../components/UpperBox.vue';
	import UnderBox from '../components/UnderBox.vue';
	import GoBackButton from '../components/GoBackButton.vue';

	export default {
		name: 'UserWallet',
		data() {
			return {
				virtualWallet: {},
				money: 0
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');

			this.$axios.get('VirtualWallet/' + this.user.userId
			).then(response => {
				this.virtualWallet = response.data;
			}).catch(error => {
				console.error(error);
			});
		},
		methods: {
			GiveMoney() {
				if(this.money == '') {
					alert('请输入充值金额')
				}
				this.virtualWallet.balance += this.money;
				console.log(this.virtualWallet.balance);
				this.$axios.put('VirtualWallet',
				JSON.stringify(
					this.virtualWallet
				), {
					headers: {
						'Content-Type': "application/json"
					}
				}
				).then(response => {
				}).catch(error => {
					console.error(error);
				});
			}
		},
		components: {
			Footer,
			GoBackButton,
			UnderBox,
			UpperBox
		}
	}
</script>
<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .title-box {
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #8b80bc;
	}

	.wrapper .title-box .title-box-center {
		display: flex;
		flex-direction: column;
	}

	.wrapper .title-box .title-box-center .namber {
		font-size: 8vw;
		font-family: "微软雅黑";
		margin-bottom: 2vw;
	}

	.wrapper .title-box .title-box-center .other {
		text-align: center;
		font-size: 5vw;
	}

	.wrapper .title-box-under {
		width: 100%;
		height: 20vw;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-bottom: #8b80bc 1vw solid;
	}

	.wrapper .title-box-under ul {
		display: flex;
		flex-direction: row;
	}

	.wrapper .title-box-under ul li {
		text-align: center;
	}

	.wrapper .title-box-under ul .char {
		width: 40vw;
		height: 10vw;

	}

	.wrapper .title-box-under ul span {
		font-size: 6vw;
		color: #8b80bc;
	}

	.wrapper .title-box-under ul .center {
		margin-left: 6vw;
		margin-right: 6vw;
	}

	.wrapper .mid {
		width: 100%;
		height: 40vw;
		border-bottom: #8b80bc 1vw solid;
	}

	.wrapper .mid .mid-u {
		padding-left: 5vw;
		padding-right: 5vw;
		padding-top: 5vw;
	}

	.wrapper .mid .mid-u span {
		font-size: 4vw;
		font-family: "微软雅黑";
	}

	.wrapper .mid .content {
		height: 13vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .mid .content input {
		width: 80%;
		height: 6vw;
		border-radius: 2vw;
	}

	.wrapper .mid .mid-button {
		height: 15vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .mid .mid-button .button {
		border-radius: 2vw;
		width: 70vw;
		height: 10vw;
		background-color: #8b80bc;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .mid .mid-button .button span {
		font-size: 5vw;
		font-family: "微软雅黑";
		color: rgb(0, 0, 0);
	}

	.wrapper .more {
		height: 15vw;
		display: flex;
		justify-content: space-between;
	}

	.wrapper .more span {
		padding: 3vw;
		padding-left: 10vw;
		font-size: 4vw;
	}

	.wrapper .more .fa-angle-right {
		padding: 2vw;
		padding-right: 6vw;
		font-size: 6vw;
	}
</style>
